<template>
	<view>
		<view class="search-box">
			<image class="search-img1" src="@/static/images/xiangzuo.png" alt="" @tap="goBack"></image>
			<view class="search">
				<image class="search-img2" src="@/static/images/sousuo1.png" alt="" @tap=""></image>
				<input class="search-input" type="text" placeholder="大家都在搜:石材普工" v-model="keyword">
			</view>
		</view>

		<view class="video-list">
			<liuyuno-tabs :tabData="secCates" :defaultIndex="defaultIndex" style="width: 100%;" />
		</view>

		<view class="video-cate">
			<view class="video-cate-imgs" v-if="VideosDataCount > 0">
				<view class="video-cate-imgs-content" style="height:333upx" v-for="item in VideosData" :key="item.id">
					<view class="video-cate-imgs-box">
						<image class="video-cate-img" :src="item.cover_url" mode="" @tap="checkInfo(item.id)"></image>
						<view class="video-title" @tap="checkInfo(item.id)">
							{{item.title}}
						</view>
						<view class="video-detail">
							<text style="color:#545556">{{item.view_num}}人学习</text>
						</view>
					</view>
				</view>
			</view>

			<view class="empty" v-else>
				<image src="/static/images/zanwushuju.png" alt="" class="empty-img"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import empty from "@/components/empty";
	import liuyunoTabs from "@/pages5/components/liuyuno-tabs/liuyuno-tabs.vue";

	import BottomTabbar from '@/components/bottom-tabbar/bottom-tabbar.vue';
	export default {
		data() {
			return {
				title: '',
				keyword: '',
				isLoaded: false,
				defaultIndex: 0,
				secCates: [],
				VideosData: [],

				VideosDataCount: 0,
			}
		},

		components: {
			empty,
			liuyunoTabs
		},

		computed: {
			...mapState(['hasLogin'])
		},

		// 页面生命周期，下拉刷新后触发
		onPullDownRefresh() {
			this.getVideos();
			// 停止下拉刷新
			setTimeout(function() {
				uni.stopPullDownRefresh()
			}, 500)



		},

		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数

			this.loadData();
			setTimeout(() => {
				this.isLoaded = true;
				uni.hideLoading();
			}, 600)

			uni.$on('tabClick', (option) => {
				let cid = this.secCates[option.index].cid;
				this.getVideos({
					pid: cid
				})

			})
		},
		methods: {
			goBack() {
				uni.navigateBack({
					delta: 1
				});
			},

			async loadData() {
				this.getSecondCates();
				this.getVideos();
			},

			async getResult() {
				let keyword = this.keyword.trim();
				if (!keyword) {
					this.$api.msg('请输入搜索内容')
					this.keyword = ''
					return false;
				}

				let dataObj = {};
				dataObj.keyword = this.keyword;
				this.getVideos(dataObj)
			},

			async getSecondCates() {
				let cdata = await this.$myRequest({
					url: '/secondCates',
					// data: dataObj,
					methods: "GET"
				})

				this.secCates = cdata.data.data;
			},

			async getVideos(dataObj = {}) {
				let vdata = await this.$myRequest({
					url: '/thirdCates',
					data: dataObj,
					methods: "POST"
				})
				// console.log(vdata.data.data);
				this.VideosData = vdata.data.data;
				this.VideosDataCount = this.VideosData.length;
			},

			async checkInfo(id) {
				if (!this.hasLogin) {
					this.$api.msg('请先登录！');
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/login/login'
						})
					}, 1000)
					return false;
				}

				uni.navigateTo({
					url: '/pages5/pages/videos/video-detail?id=' + id
				})
			}
		}
	}
</script>
<style>
	page {
		background-color: #fff;
		font-size: $font-base;
	}
</style>
<style lang='scss' scoped>
	.search-box {
		// #ifdef APP-PLUS
		padding: 132rpx 30rpx 0;
		// #endif

		// #ifdef H5
		padding: 80rpx 36rpx 0;
		// #endif

		// #ifdef MP-WEIXIN
		padding: 132rpx 30rpx 0;
		// #endif

		display: flex;
		align-items: center;
		justify-content: space-between;

		.search-img1 {
			float: right;
			width: 17rpx;
			height: 30rpx;
			margin-right: 4rpx;
		}

		.search {
			/* margin-bottom: 28rpx; */
			height: 68rpx;
			line-height: 68rpx;
			width: 606rpx;
			display: flex;
			align-items: center;
			/* justify-content: space-between; */
			border-radius: 10rpx;
			/* margin-left: 12%; */
			background-color: #fff;
			border: 1px solid #f3f3f6;
			padding: 0 13upx;

			.search-input {
				height: 58rpx;
				font-size: 26rpx;
				padding-left: 29upx;
				background-color: #fff;
				border-radius: 23.5upx;
				width: 72%;
			}

			.search-img2 {
				float: right;
				width: 25rpx;
				height: 25rpx;
				margin-right: 4rpx;
			}
		}
	}

	.video-list {
		display: flex;
		/* height: 212upx; */
		padding: 25rpx 18upx 52rpx;
		font-size: $font-base;

		.video-style {
			width: 86upx;
			height: 72upx;
			padding-bottom: 5upx;
		}

		.recom-video,
		.free-video,
		.hot-video,
		.cate-video {
			width: 25%;
			display: flex;
			flex-direction: column;
			/* justify-content: center; */
			align-items: center;
		}
	}

	.video-cate {
		/* height: 490upx; */
		padding: 0 36rpx;

		.video-cate-text {
			display: flex;
			align-items: center;
			font-size: $font-base;
		}

		.video-cate-text-img {
			width: 5upx;
			height: 28upx;
			margin-right: 16upx;
		}

		.video-cate-imgs {
			/* height: 462upx; */
			/* padding-top: 35upx; */

			.video-cate-imgs-content {
				position: relative;
				display: inline-block;
				width: 320upx;
				height: 214upx;

				&:nth-child(2n+1) {
					margin-right: 38upx;
				}
			}

			.video-cate-imgs-box {
				height: 298upx;
				font-size: $font-base;
			}

			.video-cate-img {
				width: 320upx;
				height: 180upx;
				border-radius: 15upx;
			}

			.video-title {
				height: 59upx;
				line-height: 59upx;
				width: 100%;
				word-break: keep-all;
				/* 不换行 */
				white-space: nowrap;
				/* 不换行 */
				overflow: hidden;
				/* 内容超出宽度时隐藏超出部分的内容 */
				text-overflow: ellipsis;

				background-color: #FFFFFF;
				padding: 0 12upx;
			}

			.video-detail {
				height: 59upx;
				line-height: 59upx;
				display: flex;
				justify-content: space-between;
				background-color: #FFFFFF;
				padding: 0 12upx;
				border-bottom-left-radius: 15upx;
				border-bottom-right-radius: 15upx;
			}
		}
	}

	.empty {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);

		.empty-img {
			width: 182rpx;
			height: 182rpx;
		}
	}
</style>
